<template>
  <div class="home-container">
    <el-row :gutter="15" class="home-card-three">
      <el-col :xs="24" :sm="10" :md="8" :lg="6" :xl="6">
        <el-card>
          <div class="personal-user">
            <div class="personal-user-left">
              <img
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
              />
            </div>
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" :sm="8" class="personal-item mb6">
                      <div class="personal-item-label">用户:</div>
                      <div class="personal-item-value">admin</div>
                    </el-col>
                    <el-col :xs="24" :sm="16" class="personal-item mb6">
                      <div class="personal-item-label">登录时间：</div>
                      <div class="personal-item-value">2021-02-05 18:47:26</div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
        <div class="home-card-item flex mt10"></div
      ></el-col>
      <el-col :xs="24" :sm="14" :md="16" :lg="18" :xl="18" class="home-media">
        <div class="home-card-item">
          <div class="home-card-item-title">快捷导航工具</div>
          <div class="home-monitor">
            <div class="flex-warp">
              <div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
                <div class="flex-warp-item-box" :class="`home-animation${k}`">
                  <div class="flex-margin">
                    <i :class="v.icon" :style="{ color: v.iconColor }"></i>
                    <span class="pl5">{{ v.label }}</span>
                    <div class="mt10">{{ v.value }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-card-item mt10">
          <div style="height: 100%" ref="homeBarRef"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  reactive,
  defineComponent,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
} from "vue";
import * as echarts from "echarts";
import { useStore } from "@/store/index";

// let global: any = {
// 	homeChartOne: null,
// 	homeChartTwo: null,
// 	homeCharThree: null,
// 	dispose: [null, '', undefined],
// };

export default defineComponent({
  name: "home",
  setup() {
    const homeLineRef = ref();
    const homePieRef = ref();
    const homeBarRef = ref();
    const store = useStore();
    const state = reactive({
      homeThree: [
        {
          icon: "iconfont icon-yangan",
          label: "模型设计器",
          value: "2.1%OBS/M",
          iconColor: "#F72B3F",
        },
      ],
      myCharts: [],
      charts: {
        theme: "",
        bgColor: "",
        color: "#303133",
      },
    });

    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
      nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
          setTimeout(() => {
            (<any>state.myCharts[i]).resize();
          }, i * 1000);
        }
      });
    };
    // 批量设置 echarts resize
    const initEchartsResize = () => {
      window.addEventListener("resize", initEchartsResizeFun);
    };
    // 页面加载时
    onMounted(() => {
      initEchartsResize();
    });
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
      initEchartsResizeFun();
    });
    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    watch(
      () => store.state.tagsViewRoutes.isTagsViewCurrenFull,
      () => {
        initEchartsResizeFun();
      }
    );
    // 监听 vuex 中是否开启深色主题
    watch(
      () => store.state.themeConfig.themeConfig.isIsDark,
      (isIsDark) => {
        nextTick(() => {
          state.charts.theme = isIsDark ? "dark" : "";
          state.charts.bgColor = isIsDark ? "transparent" : "";
          state.charts.color = isIsDark ? "#dadada" : "#303133";
        });
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      homeLineRef,
      homePieRef,
      homeBarRef,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
  overflow: hidden;
  .home-card-three {
    .home-card-item {
      width: 100%;
      height: 300px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);
      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }
      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;
        i {
          color: var(--el-text-color-placeholder);
        }
      }
      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }

  .personal-user {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    line-height: 30px;
    .personal-user-left {
      width: 60px;
      height: 60px;
      border-radius: 3px;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }
    }

    .home-card-three {
      .home-card-item {
        height: 400px;
        width: 100%;
        overflow: hidden;
        .home-monitor {
          height: 100%;
          .flex-warp-item {
            width: 25%;
            height: 111px;
            display: flex;
            .flex-warp-item-box {
              margin: auto;
              text-align: center;
              color: var(--el-text-color-primary);
              display: flex;
              border-radius: 5px;
              background: var(--next-bg-color);
              cursor: pointer;
              transition: all 0.3s ease;
              &:hover {
                background: var(--el-color-primary-light-9);
                transition: all 0.3s ease;
              }
            }
            @for $i from 0 through $homeNavLengh {
              .home-animation#{$i} {
                opacity: 0;
                animation-name: error-num;
                animation-duration: 0.5s;
                animation-fill-mode: forwards;
                animation-delay: calc($i/10) + s;
              }
            }
          }
        }
      }
    }
  }
}
</style>
